<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;!important;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>日记管理 / 日记列表</span>
                <Button type="info" ghost icon="md-add" @click="addDiaryVisable=true">添加日记</Button>
            </p>
            <!--日记表格-->
            <div>
                <Table style="background-color: red" :height="508" stripe :columns="diaryColumns" :data="diaryList">
                    <template slot-scope="{ row }" slot="picture">
                        <img style="width:200px;height: 125px" :src="row.dpicture" alt="">
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <Button ghost type="info" size="small" icon="md-create" style="margin-right: 5px"
                                @click="editDiary(row)">编辑
                        </Button>
                        <Button ghost type="error" size="small" icon="md-trash" @click="deleteDiary(row.did)">删除
                        </Button>
                    </template>
                </Table>
            </div>
        </Card>
        <!--添加日记对话框-->
        <Modal v-model="addDiaryVisable" title="添加日记" footer-hide>
            <Form ref="diaryRef" :model="diaryVo" :rules="diaryRef" :label-width="120">
                <FormItem label="日记内容:" prop="content">
                    <Input v-model="diaryVo.content" type="textarea"
                           placeholder="请输入日记内容" :rows="6"/>
                </FormItem>
                <FormItem label="上传封面:">
                    <img style="width: 200px;height: 125px" :src="diaryVo.picUrl" alt="">
                    <Upload action="http://localhost:8080/edwardBlog/diary_pic" :headers="uploadHeader"
                            :on-success="(response, file, fileList)=>uploadSuccess(response, file, fileList,'add')">
                        <Button icon="ios-cloud-upload-outline">Upload picture</Button>
                    </Upload>
                </FormItem>
                <Button type="success" long @click="addDiary('diaryRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="addDiaryVisable=false">取消</Button>
            </Form>
        </Modal>
        <!--修改日记对话框-->
        <Modal v-model="editDiaryVisable" title="更新日记" footer-hide :closable="false">
            <Form ref="diaryRef" :model="diaryVo" :rules="diaryRef" :label-width="120">
                <FormItem label="日记内容:" prop="content">
                    <Input v-model="diaryVo.content" type="textarea"
                           placeholder="请输入日记内容" :rows="6"/>
                </FormItem>
                <FormItem label="上传封面:">
                    <img style="width: 200px;height: 125px" :src="diaryVo.newPicUrl" alt="">
                    <Upload action="http://localhost:8080/edwardBlog/diary_pic" :headers="uploadHeader"
                            :on-success="(response, file, fileList)=>uploadSuccess(response, file, fileList,'edit')">
                        <Button icon="ios-cloud-upload-outline">Upload picture</Button>
                    </Upload>
                </FormItem>
                <Button type="success" long @click="updateDiary('diaryRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="cancelUpate">取消</Button>
            </Form>
        </Modal>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadHeader: {
          type: 'back',
          lhamster_identity_info: window.sessionStorage.getItem('lhamster_identity_info')
        },
        // 对话框显示和隐藏
        addDiaryVisable: false,
        editDiaryVisable: false,
        // 参数
        diaryVo: {
          content: '',
          picUrl: '',
          id: 0,
          newPicUrl: ''
        },
        // 日记列表
        diaryList: [],
        // 日记表格规则映射
        diaryColumns: [
          {
            type: 'index',
            align: 'center'
          },
          {
            title: '日记内容',
            key: 'dcontent',
            align: 'center',
            width: '500px'
          },
          {
            title: '发布日期',
            key: 'dDiarytime',
            align: 'center'
          },
          {
            title: '日记配图',
            slot: 'picture',
            align: 'center',
            width: '250px'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: '180px'
          }
        ],
        // 规则
        diaryRef: {
          content: [
            { required: true, message: '日记内容不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
      this.getDiaries()
    },
    methods: {
      // 查询日记
      getDiaries() {
        this.$http.get('diaries').then(res => {
          res = res.data
          if (res.code === 0) {
            this.diaryList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 图片上传成功
      uploadSuccess(response, file, fileList, mark) {
        if (response.code === 6301) {
          this.$Message.success(response.msg)
          if (mark === 'add') {
            this.diaryVo.picUrl = response.data
          }
          if (mark === 'edit') {
            this.diaryVo.newPicUrl = response.data
          }
        } else {
          this.$Message.error(response.msg)
        }
      },
      // 添加日记
      addDiary(name) {
        this.$refs[name].validate(valid => {
          if (!valid) return;
          this.$http.post('diary', new URLSearchParams(this.diaryVo)).then(res => {
            res = res.data;
            if (res.code === 6310) {
              this.$Message.success(res.msg);
              this.getDiaries();
              this.addDiaryVisable = false;
              this.diaryVo.picUrl = ''
              this.diaryVo.content = ''
            } else {
              this.$Message.error(res.msg);
            }
          })
        })
      },
      // 删除日记
      deleteDiary(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该日记吗？',
          onOk: () => {
            this.$http.delete(`diary?id=${id}`).then(res => {
              res = res.data;
              if (res.code === 6330) {
                this.$Message.success(res.msg);
                this.getDiaries();
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      editDiary(row) {
        this.diaryVo.id = row.did;
        this.diaryVo.content = row.dcontent;
        this.editDiaryVisable = true;
      },
      // 更新日记
      updateDiary(name) {
        this.$refs[name].validate(valid => {
          if (!valid) {
            return
          }
          this.$http.put('diary', new URLSearchParams(this.diaryVo)).then(res => {
            res = res.data;
            if (res.code === 6320) {
              this.diaryVo.content = ''
              this.diaryVo.newPicUrl = ''
              this.editDiaryVisable = false
              this.$Message.success(res.msg)
              this.getDiaries()
            } else {
              this.$Message.error(res.msg)
            }
            this.diaryVo.content = ''
          })
        })
      },
      // 取消更新
      cancelUpate() {
        this.diaryVo.id = 0;
        this.diaryVo.content = '';
        this.diaryVo.newPicUrl = '';
        this.editDiaryVisable = false
      }
    }
  }
</script>

<style scoped>

</style>
